import { getFormItems } from '@/hooks/use-table-and-form-config/form';
import { FORM_TYPE } from '@/hooks/use-table-and-form-config/index';
import { ConfigProps } from '@/hooks/use-table-and-form-config/type';
import { QueryFilter, QueryFilterProps } from '@ant-design/pro-components';
import { useMemo } from 'react';
import styles from './index.less';

interface Props extends QueryFilterProps {
  outStyle?: React.CSSProperties;
  columns?: ConfigProps[];
}

const Index = (props: Props) => {
  const { children, outStyle, columns, ...rest } = props;

  const useColumns = useMemo(() => {
    if (Array.isArray(columns) && columns.length > 0) {
      return true;
    }
    return false;
  }, [columns]);

  const content = getFormItems(
    columns?.filter((el) => el) as ConfigProps[],
    FORM_TYPE.SEARCH,
  );
  return (
    <div className={styles?.query_filter} style={outStyle}>
      <QueryFilter isKeyPressSubmit {...rest}>
        {useColumns ? content : children}
      </QueryFilter>
    </div>
  );
};
export default Index;
